<template>
	<view class="submit">
		<view class="title-page">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar">

			</view>
			<view class="title">
				<image :src="leftIcon" @tap="leftClick" class="left-img"></image>
				提交订单
			</view>
		</view>
		<view class="bg-class"></view>
		<view class="content" :style="contentStyle">
			<scroll-view class="scroll-class" :scroll-y="true">
				<!-- 地址选择区域 -->
				<view class="address-block">
					<view class="address-check" @tap="checkAddress">
						<view class="address-option center">
							<view class="txts  ">{{site.region}}</view>
							<view class="right-icon center">
								<image :src="rightIcon" class="auto-img"></image>
							</view>
						</view>
						<view class="address-detail">{{site.detailed}}</view>
					</view>

					<view class="time-block center" @tap="checkTime">
						<view class="left-name">配送时间</view>
						<view class="right-time">
							<picker :range='pickerColumns' :value="pickerIndex" @change='pickerChange'>
								{{distributionTime||'请选择配送方式'}}
							</picker>
						</view>
						<view class="right-icon center">
							<image :src="rightIcon" class="auto-img"></image>
						</view>
					</view>
				</view>
				<!-- 地址选择区域 -->

				<!-- 订单信息区域 -->
				<view class="order-block">
					<view class="shop-name center">
						<view class="icon center">
							<image :src="icon" class="auto-img"></image>
						</view>
						帮你吖店商城
					</view>
					<view class="shop-block">
						<block v-for="(item,index) in orderArr" :key="index">
							<view class="shop-item">
								<view class="item-img">
									<image :src="item.main_image" class="auto-img img-radius"></image>
								</view>
								<view class="item-info">
									<view class="item-title">{{item.title}}</view>
									<view class="price center" v-if="orderType==0">
										<span>¥</span>{{item.product_price/100}}
									</view>
									<view class="price center" v-if="orderType==1">
										<span>¥</span>{{seckillPrice/100}}
									</view>
									<view class="price center" v-if="orderType==2">
										<span>积分</span>{{integral}}
									</view>
								</view>
								<view class="count">X{{item.count}}</view>
							</view>
						</block>
					</view>

					<view class="option-block center">
						<view class="txt">配送方式</view>
						<view class="option-content">同城限时达</view>
						<view class="right-icon center">
							<image :src="rightIcon" class="auto-img"></image>
						</view>
					</view>

					<view class="option-block center" @tap="messageClick">
						<view class="txt">留言</view>
						<view class="message" v-if="leave_word">
							{{leave_word}}
						</view>
						<view class="message" v-else>
							给卖家留言:(50字已内)
						</view>
						<view class="right-icon center">
							<image :src="rightIcon" class="auto-img"></image>
						</view>
					</view>

				</view>
				<!-- 订单信息区域 -->
				<!-- 金额优惠券区域 -->
				<view class="hint-block">
					<view class="price-option center" v-if="orderType!==2">
						<view class="txt-block center">
							商品金额<view class="icon center">
								<image :src="hintIcon" class="auto-img"></image>
							</view>
						</view>
						<view class="price-show">¥{{total}}</view>
					</view>
					<view class="coupon-option center" @tap="couponClick" v-if="orderType!==2">
						<view class="txt">优惠券</view>
						<view class="centent">{{couponObj.counponName||'请选择优惠券'}}</view>
						<view class="right-icon   center">
							<image :src="rightIcon" class="auto-img"></image>
						</view>
					</view>
				</view>
				<!-- 金额优惠券区域 -->
				<!-- 支付方式 -->
				<view class="hint-block" style="padding-bottom: 24rpx;" v-if="orderType!==2">
					<view class="txt">支付方式</view>
					<view class="list">
						<view @click="payTypeClick(0)" class="payItem acea-row row-middle"
							:class="playTypes==0?'on':''">
							<view class="name acea-row row-center row-between-wrapper">
								<image :src="wxIcon" class="icon-weixin"></image>
								微信支付
							</view>
							<view class="tip">微信快捷支付</view>
						</view>
						<view @click="payTypeClick(1)" class="payItem acea-row row-middle"
							:class="playTypes==1?'on':''">
							<view class="name acea-row row-center row-between-wrapper">
								<image :src="moenyIcon" class="icon-weixin"></image>
								余额支付
							</view>
							<view class="tip">可用余额: {{userInfo.balance/100}}</view>
						</view>
					</view>
				</view>
				<!-- 支付方式 -->
				<view style="height: 120rpx;"></view>
			</scroll-view>
		</view>
		<view class="fixed-block center">

			<view class="money-block" v-if="orderType==1||orderType==0">
				<view class="money-left">
					<view class='one'>可获积分</view>
					<view class="price-block">
						{{total}}
					</view>
				</view>
				<span class='one'>实付:</span>
				<view class="price-block"> <span class='two'>¥</span>
					{{total}}
				</view>
			</view>

			<view class="money-block" v-if="orderType==2">
				<span class='one'>积分:</span>
				<view class="price-block"> <span class='two'></span>
					{{integral}}
				</view>

			</view>

			<view class="btn" @tap="createOrder" v-if="orderType==0">提交订单</view>

			<view class="btn" @tap="createPanicBuyingOrder" v-if="orderType==1">立即抢购</view>

			<view class="btn" @tap="createIntegralOrder" v-if="orderType==2">积分兑换</view>

		</view>

		<smh-time-range ref="checkTimeRef" @confrim='confrim' @cancel='cancel'></smh-time-range>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickerIndex: 1,
				playTypes: 0, //0 是微信支付  1是余额支付
				moenyIcon: require('@/static/order/money.png'),
				wxIcon: require('@/static/order/wxIcon.png'),
				pickerColumns: [
					'立即送达', '指定时间'
				],
				site: {}, //收货地址
				icon: require('@/static/cart/icon.png'),
				statusBarHeight: 20,
				contentStyle: '',
				leftIcon: require('@/static/detail/leftIcon.png'),
				rightIcon: require('@/static/public/rightOption.png'),
				hintIcon: require('@/static/public/hintIcon.png'),
				//新加参数
				total: 0, //合计价格
				leave_word: "测试备注", //备注,留言
				specification_ids: [],
				commodity_ids: [],
				orderArr: [],
				counts: [],
				payType: 1,
				orderType: 0, // 0是普通 1是抢购 2是积分兑换
				seckillPrice: '', //抢购价格
				integral: '', //积分数量
				distributionTime: '', //配送时间
				userInfo: {},
				couponObj: {},
			}
		},
		onLoad(e) {
			this.getDefaultSite('orderType')
			this.orderType = uni.getStorageSync("orderType")
			uni.setStorageSync('leave_word', '')
			var orderArr = uni.getStorageSync("orderArr");
			this.isShoppingTrolley = e.isShoppingTrolley;
			this.seckillPrice = uni.getStorageSync('seckillPrice') || 0
			this.integral = uni.getStorageSync('integral') || 0
			this.orderArr = orderArr;
			for (var i = 0; i < orderArr.length; i++) {
				var price;
				if (this.orderType == 0) {
					price = this.accDiv(orderArr[i].product_price, 100);
				} else if (this.orderType == 1) {
					price = this.accDiv(Number(this.seckillPrice), 100);
				} else {
					price = this.integral;
				}
				var count = orderArr[i].count;

				this.total = this.accAdd(this.total, this.accMul(price, count))

				this.commodity_ids.push(orderArr[i].commodity_id);
				this.specification_ids.push(orderArr[i].product_id);
				this.counts.push(orderArr[i].count);
			}

		},
		onShow() {
			let message = uni.getStorageSync('leave_word')
			let userInfo = uni.getStorageSync('userInfo')
			let couponObj = uni.getStorageSync('couponObj')
			this.leave_word = message
			this.userInfo = userInfo
			this.couponObj = couponObj || {}
			setTimeout(res => {
				this.initMoney()
			}, 600)
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
			let contentHeight = (uni.getSystemInfoSync().statusBarHeight * 2) + 88
			let contentHeightStyle = `top:${contentHeight}rpx;`
			this.contentStyle = contentHeightStyle
		},
		methods: {
			leftClick() {
				uni.navigateBack()
			},
			initMoney() {
				var commodity_ids = JSON.stringify(this.commodity_ids).toString();
				var specification_ids = JSON.stringify(this.specification_ids).toString();
				var counts = JSON.stringify(this.counts).toString();
				let param = {
					token: this.$tools.getToken(),
					payment_method: this.payType, //支付方式
					consignee: this.site.consignee, //收货人
					phone: this.site.mobile, //电话
					shipping_address: this.site.region + this.site.detailed,
					counts: counts.substring(1, counts.length - 1),
					appointment_time: this.distributionTime || '', //预约送达时间
					longitude: this.site.longitude, //经纬度
					latitude: this.site.latitude, //经纬度
					leave_word: this.leave_word, //留言
					isShoppingTrolley: this.isShoppingTrolley, //购物车订单，清除购物车
					commodity_ids: commodity_ids.substring(1, commodity_ids.length - 1),
					specification_ids: specification_ids.substring(1, specification_ids.length - 1),
					seckill_commodity_id:uni.getStorageSync("seckill_id")
				}
				if (this.couponObj.counponPrice) {
					param.user_coupon_id = this.couponObj.coupon_id
				}
				this.$http('order.advanceCreateOrder', {
					...param
				}).then(res => {
					if (res.code == 200) {
						
						this.total = (res.data.order_amount) / 100
					} else {
						this.$tools.showMsg(res.msg)
					}
				})
			},
			checkAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			messageClick() {
				uni.navigateTo({
					url: '/pages/submit/message'
				})
			},
			couponClick() {
				var commodity_ids = JSON.stringify(this.commodity_ids).toString();
				let str = commodity_ids.substring(1, commodity_ids.length - 1);
				uni.navigateTo({
					url: '/pages/submit/myCoupon?ids=' + str
				})
			},
			confrim(e) {
				this.close()
				this.distributionTime = e.time
				console.log(e.time, 'confrim') //确定事件 =>12:30-17:30
			},
			cancel(e) {
				this.close()
				this.distributionTime = e.time
				console.log(e.time) //取消事件 =>12:30-17:30
			},
			open() {
				this.$refs.checkTimeRef.openPopup()
			},
			close() {
				this.$refs.checkTimeRef.closePopup()
			},
			checkTime() {
				this.distributionTime = ''
			},
			pickerChange(e) {
				let str = e.detail.value
				this.pickerIndex = Number(str)

				if (this.pickerIndex == 0) {
					this.distributionTime = this.pickerColumns[this.pickerIndex]
				} else {
					this.open()
				}
			},
			//获取默认地址
			getDefaultSite() {
				this.$http('address.getDefaultSite', {
					token: this.$tools.getToken()
				}).then(res => {
					if (res.code == 200) {
						this.site = res.data.site;
					} else {
						uni.showModal({
							title: '提示',
							content: '请设置收货地址',
							showCancel: false,
							success: function(res) {
								uni.redirectTo({
									url: "/pages/address/address"
								})
							}
						});
					}
				})
			},
			//微信下单通知
			wxHintOrder() {
				 uni.requestSubscribeMessage({
					tmplIds: ['F64EKHIVNQSxVaK9mQ3nu8A48dA_9dPhFKqyvoYAOho',
						'1TBMJ1_Mzijwui-ymAjv8et9tT8TBuQlRL61mD9Lg1c',
						'bKaF-pmaS3LSpgh9cSIIUXOr4N9zAEqN3jbEvrKvx-E'
					],
					success(res) {
					 
					},
					fail(res) {
						 
					}

				})
				
			},
			//普通下单
			createOrder() {
				if (!this.distributionTime) {
					
					return this.$tools.showMsg('请选择配送方式')
				}
				
				
				
				uni.showLoading({
					title: '请稍等'
				});
				this.wxHintOrder()
			 
				var commodity_ids = JSON.stringify(this.commodity_ids).toString();
				var specification_ids = JSON.stringify(this.specification_ids).toString();
				var counts = JSON.stringify(this.counts).toString();
				if (this.couponObj.coupon_id) {
					this.$http('order.createOrder', {
						token: this.$tools.getToken(),
						user_coupon_id: this.couponObj.coupon_id,
						payment_method: this.payType, //支付方式
						consignee: this.site.consignee, //收货人
						phone: this.site.mobile, //电话
						shipping_address: this.site.region + this.site.detailed,
						counts: counts.substring(1, counts.length - 1),
						appointment_time: this.distributionTime || '', //预约送达时间
						longitude: this.site.longitude, //经纬度
						latitude: this.site.latitude, //经纬度
						leave_word: this.leave_word, //留言
						isShoppingTrolley: this.isShoppingTrolley, //购物车订单，清除购物车
						commodity_ids: commodity_ids.substring(1, commodity_ids.length - 1),
						specification_ids: specification_ids.substring(1, specification_ids.length - 1),
					}).then(res => {
						if (res.code == 200) {
							
							if (this.playTypes == 0) {
								if (res.data.order_amount == 0) {
									this.$tools.showMsg('支付成功')
									setTimeout(res => {
										uni.reLaunch({
											url: '/pages/order/index'
										})
									}, 500)
								} else {
									this.toPayHtml(res.data.orderNumber)
								}
							} else {
								if (res.data.order_amount == 0) {
									this.$tools.showMsg('支付成功')
									setTimeout(res => {
										uni.reLaunch({
											url: '/pages/order/index'
										})
									}, 500)
								} else {
									this.balanceFn(res.data.orderNumber)
								}
							}
						} else {
							this.$tools.showMsg(res.msg)
						}
					})
				} else {
					this.$http('order.createOrder', {
						token: this.$tools.getToken(),

						payment_method: this.payType, //支付方式
						consignee: this.site.consignee, //收货人
						phone: this.site.mobile, //电话
						shipping_address: this.site.region + this.site.detailed,
						counts: counts.substring(1, counts.length - 1),
						appointment_time: this.distributionTime || '', //预约送达时间
						longitude: this.site.longitude, //经纬度
						latitude: this.site.latitude, //经纬度
						leave_word: this.leave_word, //留言
						isShoppingTrolley: this.isShoppingTrolley, //购物车订单，清除购物车
						commodity_ids: commodity_ids.substring(1, commodity_ids.length - 1),
						specification_ids: specification_ids.substring(1, specification_ids.length - 1),
					}).then(res => {
						if (res.code == 200) {
							if (this.playTypes == 0) {
								if (res.data.order_amount == 0) {
									this.$tools.showMsg('支付成功')
									setTimeout(res => {
										uni.reLaunch({
											url: '/pages/order/index'
										})
									}, 500)
								} else {
									this.toPayHtml(res.data.orderNumber)
								}
							} else {
								if (res.data.order_amount == 0) {
									this.$tools.showMsg('支付成功')
									setTimeout(res => {
										uni.reLaunch({
											url: '/pages/order/index'
										})
									}, 500)
								} else {
									this.balanceFn(res.data.orderNumber)
								}
							}
						} else {
							this.$tools.showMsg(res.msg)
						}
					})
				}
			},
		//0元订单支付
			noAmountPayOrder(orderNumber) {
				this.$http('order.noAmountPayOrder', {
					token: this.$tools.getToken(),
					orderNumber: orderNumber, //支付方式
				}).then(res => {
					if (res.code == 200) {
						this.$tools.showMsg('支付成功')
						setTimeout(res => {
							uni.reLaunch({
								url: '/pages/order/index'
							})
						}, 500)
					} else {
						this.$tools.showMsg(res.msg)
					}
				})
			},
			//余额支付
			balanceFn(orderNumber) {
				this.$http('order.balancePayOrder', {
					token: this.$tools.getToken(),
					orderNumber: orderNumber, //支付方式
				}).then(res => {
					if (res.code == 200) {
						this.$tools.showMsg('支付成功')
						setTimeout(res => {
							uni.reLaunch({
								url: '/pages/order/index'
							})
						}, 500)
					} else {
						this.$tools.showMsg(res.msg)
					}
				})
			},
			//积分兑换
			createIntegralOrder() {
				if (!this.distributionTime) {
					return this.$tools.showMsg('请选择配送时间')
				}
				uni.showLoading({					title: '请稍等'				});
				this.wxHintOrder()
				var commodity_ids = JSON.stringify(this.commodity_ids).toString();
				var specification_ids = JSON.stringify(this.specification_ids).toString();
				var counts = JSON.stringify(this.counts).toString();
				this.$http('order.createIntegralOrder', {
					token: this.$tools.getToken(),
					payment_method: 1, //支付方式
					consignee: this.site.consignee, //收货人
					phone: this.site.mobile, //电话
					shipping_address: this.site.region + this.site.detailed,
					counts: counts.substring(1, counts.length - 1),
					appointment_time: this.distributionTime || '', //预约送达时间
					longitude: this.site.longitude, //经纬度
					latitude: this.site.latitude, //经纬度
					leave_word: this.leave_word, //留言
					isShoppingTrolley: this.isShoppingTrolley, //购物车订单，清除购物车
					commodity_ids: commodity_ids.substring(1, commodity_ids.length - 1),
					specification_ids: specification_ids.substring(1, specification_ids.length - 1),
				}).then(res => {
					// console.log('res 积分兑换', res)
					if (res.code == 200) {
						this.$tools.showMsg('兑换成功')
						setTimeout(res => {
							uni.switchTab({
								url: '/pages/tabbar/integral/integral'
							})
						}, 500)
					} else {
						this.$tools.showMsg(res.msg)
					}
				})
			},
			//限时抢购
			createPanicBuyingOrder() {
				if (!this.distributionTime) {
					return this.$tools.showMsg('请选择配送时间')
				}
				uni.showLoading({					title: '请稍等'				});
				this.wxHintOrder()
				var commodity_ids = JSON.stringify(this.commodity_ids).toString();
				var specification_ids = JSON.stringify(this.specification_ids).toString();
				var counts = JSON.stringify(this.counts).toString();
				this.$http('order.createPanicBuyingOrder', {
					token: this.$tools.getToken(),
					payment_method: 1, //支付方式
					consignee: this.site.consignee, //收货人
					phone: this.site.mobile, //电话
					shipping_address: this.site.region + this.site.detailed,
					counts: counts.substring(1, counts.length - 1),
					seckill_commodity_id: uni.getStorageSync('seckillId') || '',
					appointment_time: this.distributionTime || '', //预约送达时间
					longitude: this.site.longitude, //经纬度
					latitude: this.site.latitude, //经纬度
					leave_word: this.leave_word, //留言
					isShoppingTrolley: this.isShoppingTrolley, //购物车订单，清除购物车
					commodity_ids: commodity_ids.substring(1, commodity_ids.length - 1),
					specification_ids: specification_ids.substring(1, specification_ids.length - 1),
				}).then(res => {
					if (res.code == 200) {
						if (this.playTypes == 0) {
							if (res.data.order_amount == 0) {
								this.$tools.showMsg('支付成功')
								setTimeout(res => {
									uni.reLaunch({
										url: '/pages/order/index'
									})
								}, 500)
							} else {
								this.toPayHtml(res.data.orderNumber)
							}
						} else {
							if (res.data.order_amount == 0) {
								this.$tools.showMsg('支付成功')
								setTimeout(res => {
									uni.reLaunch({
										url: '/pages/order/index'
									})
								}, 500)
							} else {
								this.balanceFn(res.data.orderNumber)
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						setTimeout(res => {
							uni.switchTab({
								url: '/pages/tabbar/index/index'
							})
						}, 500)
					}
				})
			},
			payTypeClick(index) {
				this.playTypes = index
			},
			toPayHtml(orderNumber) {
				uni.showLoading({
					title: '请稍等',
					mask: true
				})
				this.$http('order.wxPay', {
					token: this.$tools.getToken(),
					orderNumber: orderNumber
				}).then(res => {
					if (res.code == 200) {
						var AtimeStamp = res.data.timeStamp;
						var AnonceStr = res.data.nonceStr;
						var Apackage = res.data.package;
						var ApaySign = res.data.paySign;
						wx.requestPayment({
							'timeStamp': AtimeStamp,
							'nonceStr': AnonceStr,
							'package': Apackage,
							'signType': 'MD5',
							'paySign': ApaySign,
							'success': function(res) {
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
								setTimeout(res => {
									uni.reLaunch({
										url: '/pages/order/index'
									})
								}, 500)
							},
							'fail': function(res) {
								uni.showToast({
									title: '取消支付',
									icon: "none"
								})
								setTimeout(res => {
									uni.reLaunch({
										url: '/pages/order/index'
									})
								}, 500)
							},
							'complete': function(res) {}
						})
					}
				})
			},
		}
	}
</script>
<style>
	page {
		background: #FAFAF5FF;
	}
</style>
<style lang="scss" scoped>
	.submit {
		height: 100vh;
		position: relative;

	}

	.bg-class {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 11;
		height: 542rpx;
		background: linear-gradient(180deg, rgba(255, 192, 61, 1) 0%, rgba(252, 207, 104, 1) 43.07%, rgba(255, 255, 255, 0.01) 100%);
	}


	.title-page {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
	}


	.uni-status-bar {
		height: 20px;
	}

	.title {
		position: relative;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		height: 88rpx;
		color: rgba(0, 0, 0, 1);

		.left-img {
			position: absolute;
			top: 20rpx;
			display: flex;
			align-items: center;
			left: 24rpx;
			width: 50rpx;
			height: 50rpx;

		}
	}

	.content {
		position: absolute;
		z-index: 11;
		left: 24rpx;
		right: 24rpx;
		bottom: 96rpx;

		.scroll-class {
			height: 100%;

			.address-block {
				margin-top: 24rpx;
				padding: 24rpx 36rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);

				.address-check {
					padding-bottom: 24rpx;
					border-bottom: 2rpx dashed rgba(238, 238, 238, 1);

					.address-option {
						.txts {
							flex: auto;
							font-size: 32rpx;
							font-weight: 500;
							color: rgba(0, 0, 0, 1);
						}

						.right-icon {
							margin-left: 14rpx;
							flex: none;
							width: 14rpx;
							height: 24rpx;
						}
					}

					.address-detail {
						margin-top: 20rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}
				}

				.time-block {
					margin-top: 24rpx;

					.left-name {
						flex: none;
						font-size: 28rpx;
						font-weight: 500;

						color: rgba(0, 0, 0, 1);
					}

					.right-time {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						flex: auto;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(238, 104, 46, 1);
					}

					.right-icon {
						margin-left: 14rpx;
						flex: none;
						width: 14rpx;
						height: 24rpx;
					}
				}
			}

			.order-block {
				padding: 0 24rpx;
				border-radius: 8rpx;
				background: rgba(255, 255, 255, 1);
				margin-top: 24rpx;

				.shop-name {
					padding: 24rpx 0;
					font-weight: 500;
					font-size: 32rpx;
					color: rgba(27, 25, 25, 1);
					border-bottom: 2rpx solid rgba(238, 238, 238, 1);

					.icon {
						width: 56rpx;
						height: 56rpx;
						opacity: 1;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}

				}

				.shop-block {
					padding: 24rpx 0;
					border-bottom: 2rpx solid rgba(238, 238, 238, 1);

					.shop-item {
						margin-top: 32rpx;
						display: flex;
						align-items: flex-start;

						.item-img {
							flex: none;
							border-radius: 8rpx;
							width: 140rpx;
							height: 140rpx;
						}

						.item-info {
							flex: auto;
							margin-left: 20rpx;

							.item-title {
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(27, 25, 25, 1);
								line-height: 1.5em;
							}

							.price {
								color: rgba(199, 44, 30, 1);
								font-size: 32rpx;
								font-weight: 700;
								margin-top: 12rpx;

								span {
									font-size: 22rpx;
								}
							}
						}

						.count {
							padding-left: 90rpx;
							flex: none;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
						}
					}
				}

				.option-block {
					padding: 32rpx 0;

					.txt {
						flex: none;
						font-size: 28rpx;
						font-weight: 500;

						color: rgba(27, 25, 25, 1);
					}

					.option-content {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(27, 25, 25, 1);
						flex: auto;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}

					.right-icon {
						margin-left: 14rpx;
						flex: none;
						width: 14rpx;
						height: 24rpx;

					}

					.message {
						text-align: right;
						width: 530rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(27, 25, 25, 1);
						color: rgba(204, 204, 204, 1);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-left: 40rpx;
					}
				}
			}

			.hint-block {
				margin-top: 24rpx;
				padding: 0 24rpx;
				background: rgba(255, 255, 255, 1);

				.txt {
					padding-top: 24rpx;
				}

				.price-option {
					padding: 36rpx 0;

					.txt-block {
						flex: auto;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(27, 25, 25, 1);

						.icon {
							margin-left: 14rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}

					.price-show {
						flex: none;
						font-size: 30rpx;
						font-weight: 700;
						color: rgba(0, 0, 0, 1);
					}
				}

				.coupon-option {
					padding: 36rpx 0;

					.txt {
						flex: none;
						font-size: 28rpx;
						font-weight: 500;

						color: rgba(27, 25, 25, 1);
					}

					.centent {
						flex: auto;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(204, 204, 204, 1);
					}

					.right-icon {
						margin-left: 14rpx;
						flex: none;
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
		}
	}

	.list {
		margin-top: 35rpx;
	}

	.payItem {
		border: 1rpx solid #eee;
		border-radius: 6rpx;
		height: 86rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.row-middle {
		align-items: center;
	}

	.tip {
		width: 49%;
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
	}

	.on {
		border-color: #fc5445;
		color: #e93323;
	}

	.row-center {
		display: flex;
		align-items: center;
	}

	.row-between-wrapper {
		justify-content: center;
	}

	.name {
		width: 50%;
		text-align: center;
		border-right: 1rpx solid #eee;
	}

	.animated {
		animation-duration: 1s;
		animation-fill-mode: both;
	}

	.icon-weixin {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 44rpx;
		color: #fff;
		margin-right: 15rpx;
	}

	.fixed-block {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-idnex: 666;
		height: 96rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -2rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);

		.money-block {
			.money-left {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex: auto;
				margin-left: 24rpx;
			}

			flex: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(203, 60, 40, 1);

			.one {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}

			.price-block {
				margin-left: 8rpx;
				display: flex;
				align-items: flex-end;
			}

			.two {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(203, 60, 40, 1);
			}
		}

		.btn {
			flex: none;
			margin-left: 64rpx;
			margin-right: 24rpx;
			width: 166rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 718rpx;
			background: linear-gradient(128.5deg, rgba(250, 229, 104, 1) 0%, rgba(255, 200, 47, 1) 100%), linear-gradient(135.25deg, rgba(248, 220, 89, 1) 0%, rgba(246, 188, 87, 1) 100%), rgba(204, 204, 204, 1);
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}
	}

	@keyframes bounceIn {

		from,
		20%,
		40%,
		60%,
		80%,
		to {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}

		0% {
			opacity: 0;
			-webkit-transform: scale3d(0.3, 0.3, 0.3);
			transform: scale3d(0.3, 0.3, 0.3);
		}

		20% {
			-webkit-transform: scale3d(1.1, 1.1, 1.1);
			transform: scale3d(1.1, 1.1, 1.1);
		}

		40% {
			-webkit-transform: scale3d(0.9, 0.9, 0.9);
			transform: scale3d(0.9, 0.9, 0.9);
		}

		60% {
			opacity: 1;
			-webkit-transform: scale3d(1.03, 1.03, 1.03);
			transform: scale3d(1.03, 1.03, 1.03);
		}

		80% {
			-webkit-transform: scale3d(0.97, 0.97, 0.97);
			transform: scale3d(0.97, 0.97, 0.97);
		}

		to {
			opacity: 1;
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
		}
	}

	.bounceIn {
		-webkit-animation-duration: 0.75s;
		animation-duration: 0.75s;
		-webkit-animation-name: bounceIn;
		animation-name: bounceIn;
	}
</style>